<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随内容撑开</title>
    <style>
       .container {
    display: flex;
}
 
.column {
    /* 这样就可以 */
    flex: 1;
    border: 1px solid #ccc;
    box-sizing: border-box;
   text-align: center;
}

    </style>
</head>
<!-- 实现三列布局，要求三列登高等宽，并以内容最多的一列高度为准，同时每列内容居中 -->

<body>
    <div class="container">
        <div class="column">
            <p>内容1</p>
        </div>
        <div class="column">
            <p>内容2<br>更多内容</p>
        </div>
        <div class="column">
            <p>内容3<br>更多内容<br>还有更多</p><div>哈哈</div>
            <div>哈哈啊啊哈哈哈哈</div>
            <div>呼呼呼</div>
        </div>
    </div>
    <script>
        // 'DOMContentLoaded' 当 HTML 文档完全解析，执行完毕后
        // document.addEventListener('DOMContentLoaded', function () {
        //     const columns = document.querySelectorAll('.column');
        //     let maxHeight = 0;

        //     columns.forEach(column => {
        //         maxHeight = Math.max(maxHeight, column.scrollHeight);
        //     });

        //     columns.forEach(column => {
        //         column.style.height = `${maxHeight}px`;
        //     });
        // });
    </script>
</body>

</html>